<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>three</title>
</head>
<body>
  <div>three</div>
  <button id="three-btn">send msg to two</button>
  <iframe src="./two.html" style="width:200px;height:200px;" id="Aframe" frameborder="1"></iframe>
  <div class="receiveMsg">等待接收...</div>
 
<script>
  window.name = "threePage"
  const Aframe = document.getElementById('Aframe').contentWindow
  // 给Aframe发消息
  document.getElementById('three-btn').addEventListener('click', () => {
    console.log('three')
    if (Aframe) {
      Aframe.name = "Aframe"
      // Aframe.postMessage({
      //   msg: 'from three'
      // }, 'http://127.0.0.1:5500')
    }
  })
    /**
    * MessageChannel
    * */
    window.customChannel = new MessageChannel();
    customChannel.port1.onmessage = e => {
      console.log('three get msg:', e.data)
    }
    customChannel.port1.postMessage('three said to two using port1')
  // window.addEventListener('message', (e) => {
  //   console.log('three get!', e.data, e.origin, e.source.name)
  // })

    /**
     * BroadcastChannel
     * */
    const channel = new BroadcastChannel('mychannel');
    channel.onmessage = (e) => {
      document.querySelector('.receiveMsg').innerHTML = e.data
    }
</script>
</body>
</html>